<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>ColumNav example: loaded from a DOM object built programmatically</title>
    <script type="text/javascript" src="../js/yui/yahoo.js"></script>
    <script type="text/javascript" src="../js/yui/event.js"></script>
    <script type="text/javascript" src="../js/yui/container_core.js"></script>
    <script type="text/javascript" src="../js/yui/dom.js"></script>
    <script type="text/javascript" src="../js/yui/animation.js"></script>
    <script type="text/javascript" src="../js/yui/connection.js"></script>
    <script type="text/javascript" src="../js/carousel.js"></script>
    <script type="text/javascript" src="../js/columnav.js"></script>
    <link href="../css/carousel.css" rel="stylesheet" type="text/css"/>
    <link href="../css/columnav.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript">
      try { document.execCommand('BackgroundImageCache', false, true); } catch(e) {}
      function createListItem(text, href, rel) {
          var li = document.createElement('li');
          var a = document.createElement('a');
          a.setAttribute('href', href);
          a.setAttribute('rel', rel);
          a.appendChild(document.createTextNode(text));
          li.appendChild(a);
          return li;
      }
      function init() {
          var ul = document.createElement('ul');
          var nba = createListItem('NBA', 'http://sports.yahoo.com/nba/');
          var ncaa = createListItem('NCAA', 'ajax/ncaa/index.xml', 'ajax');
          ul.appendChild(nba);
          ul.appendChild(ncaa);
          var cn = new YAHOO.extension.ColumNav('columnav', 'columnav-prev', ul);
          var sv = new YAHOO.extension.SourceViewer('source', location.href, 'HTML');
      }
      YAHOO.util.Event.addListener(window, 'load', init);
    </script>
    <script type="text/javascript" src="../js/viewsource.js"></script>
    <link href="../css/stringify.css" rel="stylesheet" type="text/css"/>
  </head>
  <body>
    <div id="main">
      <div id="content">
        <h1>ColumNav</h1>
        <h2>Example</h2>
        <div class="prevButton">
          <a href="javascript:void(0)" id="columnav-prev">&lt; back</a>
        </div>
        <div id="columnav" class="carousel-component">
          <div class="carousel-clip-region">
            <ul class="carousel-list"></ul>
          </div>
        </div>
        <div class="viewsource" id="source"></div>
        <p>The ColumNav above is initialized from a manually constructed DOM object. The items initially visible on page load are the only ones required to instantiate a ColumNav object. Sub-menus can be loaded using Ajax requests by specifying <code>rel="ajax"</code> in the leaf node's anchor tag, and providing a content source <code>href</code>.</p>
      </div>
    </div>
  </body>
</html>
